<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>事件对象</h2>
    <p>用于描述当前事件的对象，可以使用window.event来访问。</p>
    <ul>
        <li>如果在标签上直接绑定事件处理函数：默认是不会传入事件参数，需要在函数中明确使用window.envent来获取。</li>
        <li>如果采用DOM对象绑定事件处理函数：那么默认第一个形式参数，就是window.event对象。</li>
    </ul>
    <h2>事件对象的常用属性和方法</h2>
    <ul>
        <li>currentTarget：触发事件的当前DOM对象</li>
        <li>target：触发事件的源DOM对象</li>
        <li>stopPropagation()：阻止事件冒泡。</li>
        <li>preventDefault()：阻止事件默认行为。</li>

    </ul>
    <div onclick="handleClickDiv()">
        div1
        <div class="div3">div3</div>
    </div>
    <div class="div2">div2</div>
    
    <script>

        let div2 = document.querySelector(".div2");
        let div3 = document.querySelector(".div3");

        div2.ondblclick = handleClickDiv;
        div3.addEventListener("click",handleClickDiv);

        function handleClickDiv(e) {
            // 如果e不为null（undefined），取e，否则取window.event
            // e = e || window.event;

            // js中if可以判断对象，如果对象不为null，那么结果为true
            if (!e) {
                e = window.event;
            }
            // 以上两种方式，算得上是js（ES5）中对函数参数赋予默认值的方式。

            // console.log(window.event == e);
            console.log("e.currentTarget = ",e.currentTarget);
            console.log("e.target = ",e.target);

            // 阻止事件冒泡
            e.stopPropagation();
        }
    </script>
</body>
</html>